﻿<template>
    <div class="hidden h100 flex-column">
        <component is="style" />
        <div class="flex-row-fill" style="overflow:auto;">
            <el-button type="primary" icon="el-icon-download" circle v-on:click="downLoad"></el-button>
            <el-row>
                <el-col :span="8" v-for="(o, index) in list" :key="o">
                    <el-card :body-style="{ padding: '0px' }">
                        <el-carousel height="250px" indicator-position="none">
                            <el-carousel-item v-for="item in o.mediaList" :key="item">
                                <img :src="item.url" class="image">
                            </el-carousel-item>
                        </el-carousel>
                        <div style="padding: 14px;">
                            @*<span>{{o.title}}</span>*@
                            <div class="bottom clearfix">
                                <time class="time">{{o.title}}</time>
                                @*<el-button type="text" class="button">操作按钮</el-button>*@
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script>
    module = (function (hxt) {
        return {
            name: 'card',
            props: {

            },
            data: function () {
                var _this = this, optor = hxt.store.optor;
                return {
                    optor: optor,
                    isAdd: true,
                    list: [],
                }
            },
            computed: {

            },
            watch: {
                'query.tab': function (val) {
                    var _this = this;
                    if (!parseInt(val)) return;
                    _this.loadList();
                    _this.loadImg();
                },
            },
            activated: function () {
            },
            mounted: function () {
                var _this = this;
                //_this.loadList();
                //_this.loadImg();
                _this.downLoad();
            },
            methods: {
                downLoad: function () {
                    var _this = this;
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', "https://api.dwo.cc/api/videos", true);
                    xhr.responseType = 'blob'
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            var url = window.URL.createObjectURL(x.response)
                            var a = document.createElement('a')
                            a.href = url;
                            a.download = 'download';
                            a.click();
                        }
                        else {
                            hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                        }
                    };
                    xhr.onerror = function (e) {
                        hxt.error('下载失败：Network request failed');
                    };
                    xhr.onloadstart = function () {
                        hxt.mask();
                    };
                    xhr.onloadend = function () {
                        hxt.unmask();
                    };
                    xhr.send(null);
                },
                imgDel: function (d, index) {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/_ossDel',
                        data: { miId: d.miId, objectName: d.miUrl },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('删除失败：' + res.errmsg);
                            hxt.success('删除成功');
                            _this.imglist.splice(index, 1);
                        }
                    });
                },
                loadList: function () {
                    var _this = this;
                    if (!_this.isAdd) return;
                    _this.list = [];
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', "https://api.lolimi.cn/API/cosplay/api.php", true);
                    xhr.onload = function () {
                        if (xhr.status === 200) {
                            var res = JSON.parse(xhr.responseText);
                            
                            var mediaList = res.data.data;
                            hxt.post({
                                url: hxt.config.link + 'pc/graphicImgSave',
                                data: { title: res.data.Title, mediaList: mediaList.join(','), optType:0 },
                                ok: function (res) {
                                    if (res.code != 0) return hxt.error('提交失败：' + res.errmsg);
                                    _this.loadImg();
                                }
                            });
                        }
                        else {
                            hxt.error('下载失败：{0}（{1}）'.formatStr(xhr.status, xhr.statusText));
                        }
                    };
                    xhr.onerror = function (e) {
                        hxt.error('下载失败：Network request failed');
                    };
                    xhr.onloadstart = function () {
                        hxt.mask();
                    };
                    xhr.onloadend = function () {
                        hxt.unmask();
                    };
                    xhr.send(null);
                },
                loadImg: function () {
                    var _this = this;
                    hxt.post({
                        url: hxt.config.link + 'pc/graphicImgSave',
                        data: { optType: 3 },
                        ok: function (res) {
                            if (res.code != 0) return hxt.error('加载失败：' + res.errmsg);
                            _this.list = res.data;
                        }
                    });
                },
                playMedia: function (evt) {
                    var el = evt.currentTarget
                        , audios = $('audio')
                        , videos = $('video');

                    $.each(audios, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                    $.each(videos, function (idx, item) {
                        if (item !== el) {
                            item.pause();
                        }
                    });
                },
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>